Recientemente, quiero usar sass para implementar un tema oscuro en mi proyecto de prueba ts, pero no sé por qué me enfrento a este problema.

 Error in plugin "sass" Message: src/Assets/Sass/main.scss Error: Invalid CSS after "...lude animations": expected "}", was ".theme-change;" on line 6 of src/Assets/Sass/main.scss >> @include animations.theme-change; -------------^

en mi archivo principal main.scss @use mis parciales e @include @mixin así:

 @use 'colors'; @use 'animations'; @use 'theme'; body { @include animations.theme-change; &[data-theme='light'] { @include theme.mode(colors.$light, colors.$dark); @include theme.components(colors.$light, colors.$dark); } &[data-theme='dark'] { @include theme.mode(colors.$dark, colors.$light); @include theme.components(colors.$dark, colors.$light); } }

Estos son mis parciales
en el lado de todos ellos hay uno o dos @mixin solamente
_animations.scss
_colors.scss
_theme.scss

_theme.scss incluye estilos y componentes de tema

 @mixin mode($theme-bg, $theme-color) { background: $theme-bg; color: $theme-color; } @mixin components($theme-bg, $theme-color) { .container { width: 100vw; height: auto; } }

_colors.scss son solo algunas variables que contienen colores de tema

 $light: #fff; $dark: #232323; $primary: #FFBD07; $secondary: #2b2d42; $tertiary: #edf2f4; $quaternary: #e5383b;

_animations.scss tiene solo un @mixin

 @mixin theme-change { transition: color, background cubic-bezier(0.68, -0.55, 0.27, 01.55) 420ms !important; }